<template>
	<view class="page">
		<view class="header-container">
			<view class="tui-header-box" :style="{ height: height + 'px' }">
				<view class="tui-header-icon" :style="{ marginTop: top + 'px' }">
					<view class="tui-icon-box" @tap="goBack">
						<tui-icon name="arrowleft" color="#333333"></tui-icon>
					</view>
					<tui-tabs
						:tabs="tabs"
						:width="tabWidth"
						:currentTab="currentTab"
						@change="change"
						sliderWidth="30"
						sliderHeight="6"
						sliderRadius="80rpx"
						sliderBgColor="#FB353B"
						selectedColor="#FB353B"
						backgroundColor="none"
						bold="true"
						color="#999999"
						unlined="true"
					></tui-tabs>
				</view>
			</view>
			<!-- 搜索条 -->
			<view class="search-container" :style="{ marginTop: height + 'px' }">
				<view class="search-box">
					<image src="/static/images/company/search.svg"></image>
					<input type="text" v-model="KeyWord" :placeholder="tabs[currentTab].textHolder" placeholder-class="input-placeholder" />
				</view>
				<view class="search-btn" @tap="search">搜索</view>
			</view>
		</view>
		<!-- 人脉 -->
		<view class="user-container" :style="{ marginTop: height + 60 + 'px' }" v-if="currentTab == 3">
			<tui-tabs
				:tabs="renmaiTab"
				sliderWidth="60"
				sliderHeight="6"
				sliderRadius="100rpx"
				sliderBgColor="#666666"
				selectedColor="#666666"
				backgroundColor="none"
				bold="true"
				color="#999999"
				width="250"
				itemWidth="50%"
				zIndex="1"
				:currentTab="renmaiCurrentTab"
				@change="ChangeRenmaiTab"
			></tui-tabs>
			<view class="scroll-container">
				<view class="renmai-box" v-for="(val, index1) in renmaiTab[renmaiCurrentTab].Data">
					<view class="title-tle">
						{{ val.letter }}
					</view>
					<view class="user-box" v-for="(item, index) in val.users">
						<view class="left-box" @tap="userDetail(item.YonghuID)">
							<image :src="item.Avatar || '/static/images/my/noAvatar.svg'" class="user-avatar" mode="aspectFill"></image>
							<view class="user-info">
								<view class="line-box">
									<view class="user-name">{{ item.Name || info.NAME }}</view>
									<view class="tuijian-each" v-if="item.Ituijian && item.tuijianI && item.friend">互相推荐</view>
									<view class="friend-each" v-else-if="item.friend">好友</view>
									<view class="tuijian-each" v-else-if="item.Iguanzhu && item.guanzhuI">互相关注</view>
								</view>
								<view class="line-box">
									<view class="line-title" v-if="item.Gongsi">
										{{ item.Gongsi }}
									</view>
									<view class="line-title" v-if="item.Zhiwei || item.Diqu">
										{{ item.Zhiwei || item.Diqu.split(' ')[0] }}
									</view>
								</view>
							</view>
						</view>
						<view class="right-box">
							<view class="confirm-btn" v-if="!item.friend" @tap="addFriendApply(item.YonghuID)">加为好友</view>
							<view class="confirm-btn" v-else-if="!item.Ituijian" @tap="TuijianUser(index, item.YonghuID, index1)">推荐他/她</view>
							<view class="sendMessage-btn" v-else @tap="sendMessage(item.YonghuID, item.Account)">
								<image src="/static/images/my/sndMessage1.svg" mode=""></image>
								<view class="">发信息</view>
							</view>
							<view class="more-btnContainer">
								<tui-icon name="more-fill" color="#999" size="20" @tap="moreBtnShow(index, '', index1)"></tui-icon>
								<tui-bubble-popup
									:show="item.moreBtn"
									:mask="false"
									position="absolute"
									direction="top"
									@close="moreBtnShow(index, '', index1)"
									width="200rpx"
									left="-150rpx"
									top="100%"
									radius="16rpx"
									translateY="-100%"
									triangleRight="20rpx"
									triangleTop="-20rpx"
									mask="true"
									backgroundColor="#fff"
								>
									<view class="menu-item" v-if="item.guanzhuI && !item.Iguanzhu" @tap="GuanzhuUser(index, item.YonghuID, '', index1)">
										<image src="/static/images/my/huguan.svg"></image>
										<view>互关</view>
									</view>
									<view class="menu-item" v-else @tap="GuanzhuUser(index, item.YonghuID, '', index1)">
										<image :src="item.Iguanzhu ? '/static/images/company/hongxin.png' : '/static/images/company/xin.png'"></image>
										<view>{{ item.Iguanzhu ? '取消关注' : '关注用户' }}</view>
									</view>
									<view class="menu-item" v-if="item.friend" @tap="caozuoShow(item)">
										<image src="/static/images/my/share.svg"></image>
										<view>分享人脉</view>
									</view>
									<view class="menu-item" v-if="item.friend" @tap="sendMessage(item.YonghuID, item.Account)">
										<image src="/static/images/my/sendMessage.svg"></image>
										<view>发送消息</view>
									</view>
									<view class="menu-item" @tap="TuijianUser(index, item.YonghuID, index1)" v-if="!item.Ituijian && item.friend">
										<image src="/static/images/my/zan.svg"></image>
										<view>推荐好友</view>
									</view>
									<view class="menu-item" @tap="TuijianUser(index, item.YonghuID, index1)" v-else-if="item.friend">
										<image src="/static/images/my/noZan.svg"></image>
										<view>取消推荐</view>
									</view>
									<view class="menu-item" @tap="deleteFriend(index, item.YonghuID, index1)" v-if="item.friend">
										<image src="/static/images/my/delete.svg"></image>
										<view>删除好友</view>
									</view>
								</tui-bubble-popup>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 我关注的/推荐我的/粉丝 -->
		<view class="user-container" :style="{ marginTop: height + 60 + 'px' }" v-else>
			<view v-if="currentTab == 1 && userApply.Data.length">
				<view class="title-info">好友邀请({{ DataCount.friendApplyCount || 0 }}人)</view>
				<view class="scroll-container" style="margin-bottom: 20rpx">
					<view class="user-box" v-for="(item, index) in userApply.Data">
						<view class="left-box" @tap="userDetail(item.YonghuID)">
							<image :src="item.Avatar || '/static/images/my/noAvatar.svg'" class="user-avatar" mode="aspectFill"></image>
							<view class="user-info">
								<view class="line-box">
									<view class="user-name">{{ item.Name }}</view>
									<!-- <view class="tuijian-each" v-if="item.Ituijian">互相推荐</view> -->
								</view>
								<view class="line-box">
									<view class="line-title" v-if="item.Gongsi">
										{{ item.Gongsi }}
									</view>
									<view class="line-title" v-if="item.Zhiwei || item.Diqu">
										{{ item.Zhiwei || item.Diqu.split(' ')[0] }}
									</view>
								</view>
							</view>
						</view>
						<view class="right-box">
							<view class="confirm-btn" @tap="lookApply(item.Id)">查看请求</view>
							<view class="more-btnContainer" v-if="!item.Iguanzhu">
								<tui-icon name="more-fill" color="#999" size="20" @tap="moreBtnShow(index, 'userApply')"></tui-icon>
								<tui-bubble-popup
									:show="item.moreBtn"
									:mask="false"
									position="absolute"
									direction="top"
									@close="moreBtnShow(index, 'userApply')"
									width="200rpx"
									left="-150rpx"
									top="100%"
									radius="16rpx"
									translateY="-100%"
									triangleRight="10rpx"
									triangleTop="-22rpx"
									mask="true"
									backgroundColor="#fff"
								>
									<view class="menu-item" @tap="GuanzhuUser(index, item.YonghuID, 'userApply')">
										<image src="/static/images/my/huguan.svg"></image>
										<view>{{ item.guanzhuI ? '互关' : '关注' }}</view>
									</view>
								</tui-bubble-popup>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="title-info">{{ tabs[currentTab].name }}({{ DataCount[tabs[currentTab].CountName] || 0 }}人)</view>
			<view class="scroll-container">
				<view class="user-box" v-for="(item, index) in tabs[currentTab].Data" v-if="tabs[currentTab].Data.length">
					<view class="left-box" @tap="userDetail(item.YonghuID)">
						<image :src="item.Avatar || '/static/images/my/noAvatar.svg'" class="user-avatar" mode="aspectFill"></image>
						<view class="user-info">
							<view class="line-box">
								<view class="user-name">{{ item.Name }}</view>
								<view class="tuijian-each" v-if="item.Ituijian && item.tuijianI && item.friend">互相推荐</view>
								<view class="friend-each" v-else-if="item.friend">好友</view>
								<view class="tuijian-each" v-else-if="item.Iguanzhu && item.guanzhuI">互相关注</view>
								<!-- <view class="tuijian-each" v-if="(currentTab == 1 || currentTab == 2) && item.guanzhuI && item.Iguanzhu">互相关注</view>
								<view class="tuijian-each" v-else-if="currentTab == 0 && item.Ituijian && item.tuijianI">互相推荐</view> -->
							</view>
							<view class="line-box">
								<view class="line-title" v-if="item.Gongsi">
									{{ item.Gongsi }}
								</view>
								<view class="line-title" v-if="item.Zhiwei || item.Diqu">
									{{ item.Zhiwei || item.Diqu.split(' ')[0] }}
								</view>
							</view>
							<view class="line-box" v-if="item.RenmaiType">
								<view class="line-title">
									{{ item.RenmaiType + '度人脉' }}
								</view>
							</view>
						</view>
					</view>
					<view class="right-box">
						<view class="confirm-btn" v-if="!item.friend" @tap="addFriendApply(item.YonghuID)">加为好友</view>
						<view class="confirm-btn" v-else-if="!item.Ituijian" @tap="TuijianUser(index, item.YonghuID)">推荐他/她</view>
						<view class="sendMessage-btn" v-else @tap="sendMessage(item.YonghuID, item.Account)">
							<image src="/static/images/my/sndMessage1.svg" mode=""></image>
							<view class="">发信息</view>
						</view>
						<view class="more-btnContainer">
							<tui-icon name="more-fill" color="#999" size="20" @tap="moreBtnShow(index)"></tui-icon>
							<tui-bubble-popup
								:show="item.moreBtn"
								:mask="false"
								position="absolute"
								direction="top"
								@close="moreBtnShow(index)"
								width="200rpx"
								left="-150rpx"
								top="100%"
								radius="16rpx"
								translateY="-100%"
								triangleRight="20rpx"
								triangleTop="-20rpx"
								mask="true"
								backgroundColor="#fff"
							>
								<view class="menu-item" v-if="item.guanzhuI && !item.Iguanzhu" @tap="GuanzhuUser(index, item.YonghuID)">
									<image src="/static/images/my/huguan.svg"></image>
									<view>互关</view>
								</view>
								<view class="menu-item" v-else @tap="GuanzhuUser(index, item.YonghuID)">
									<image :src="item.Iguanzhu ? '/static/images/company/hongxin.png' : '/static/images/company/xin.png'"></image>
									<view>{{ item.Iguanzhu ? '取消关注' : '关注用户' }}</view>
								</view>
								<view class="menu-item" v-if="item.friend" @tap="caozuoShow(item)">
									<image src="/static/images/my/share.svg"></image>
									<view>分享人脉</view>
								</view>
								<view class="menu-item" v-if="item.friend" @tap="sendMessage(item.YonghuID, item.Account)">
									<image src="/static/images/my/sendMessage.svg"></image>
									<view>发送消息</view>
								</view>
								<view class="menu-item" @tap="TuijianUser(index, item.YonghuID)" v-if="!item.Ituijian && item.friend">
									<image src="/static/images/my/zan.svg"></image>
									<view>推荐好友</view>
								</view>
								<view class="menu-item" @tap="TuijianUser(index, item.YonghuID)" v-else-if="item.friend">
									<image src="/static/images/my/noZan.svg"></image>
									<view>取消推荐</view>
								</view>
								<view class="menu-item" @tap="deleteFriend(index, item.YonghuID)" v-if="item.friend">
									<image src="/static/images/my/delete.svg"></image>
									<view>删除好友</view>
								</view>
							</tui-bubble-popup>
						</view>
					</view>
				</view>
				<view v-else class="no-Data">
					<image src="/static/images/my/noData.png" mode="widthFix"></image>
					<view>暂无信息</view>
				</view>
			</view>
		</view>
	</view>

	<!-- 添加好友 -->
	<tui-modal :show="AddFriend" @cancel="AddFriend = false" padding="0" custom>
		<view class="MingPian-tips-model" style="height: auto">
			<view class="modal-BT">添加好友</view>
			<textarea name="" placeholder="你好，希望能添加你为好友" v-model="ShenqingLY" placeholder-class="model-input" cols="30" rows="10"></textarea>
			<view class="wanS-btn" @tap="sendYaoqing">发送邀请</view>
		</view>
	</tui-modal>
	<!-- 分享 -->
	<tui-bottom-popup :zIndex="1002" backgroundColor="#F5F5F5" :maskZIndex="1001" :show="zhuanfaShow" @close="zhuanfaShow = false">
		<view class="popup-header">
			<view>分享至</view>
			<tui-icon name="shut" @tap="zhuanfaShow = false" color="#3e3e3e" size="20" class="popup-close"></tui-icon>
		</view>
		<view class="popup-line">
			<scroll-view scroll-x="true" style="white-space: nowrap" @scrolltoupper="getFriendList">
				<view style="display: inline-flex">
					<view class="friend-box" v-for="(item, index) in friendsList.Data" @tap="shareUser(item, index)">
						<view class="friend-avatar">
							<image :src="item.Avatar || '/static/images/my/noAvatar.svg'" mode="aspectFill"></image>
							<view class="select-box" v-if="shareUserInfo.userList && shareUserInfo.userList.length">
								<tui-icon name="circle" color="#999" size="20" v-if="!item.Selected"></tui-icon>
								<tui-icon name="circle-fill" color="#FB353B" size="20" v-else></tui-icon>
							</view>
						</view>
						<view>{{ item.NAME }}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="popup-line" v-if="!shareUserInfo.userList.length">
			<!-- <view class="share-box">
				<image src="/static/images/find/sixin.svg" class="share-img" mode="aspectFill"></image>
				<view>私信好友</view>
			</view> -->
			<button v-if="winInfo.uniPlatform == 'mp-weixin'" open-type="share" style="margin: 0; padding: 0; line-height: normal">
				<view class="share-box">
					<image src="/static/images/find/wechat.svg" class="share-img" mode="aspectFill"></image>
					<view>微信好友</view>
				</view>
			</button>
			<view v-else class="share-box" @tap="shareWechat">
				<image src="/static/images/find/wechat.svg" class="share-img" mode="aspectFill"></image>
				<view>微信好友</view>
			</view>
		</view>
		<view v-if="shareUserInfo.userList.length" class="popup-line share-NR" style="border: 0">
			<textarea v-model="shareUserInfo.pinglunNR" placeholder-class="input-placeholder" placeholder="和朋友说点什么吧......"></textarea>
			<image v-if="currentInfo" class="user-avatar" :src="currentInfo.Avatar" mode="aspectFill"></image>
		</view>
		<view v-if="shareUserInfo.userList.length" class="fasong-btn" @tap="shareMessage">发送</view>
	</tui-bottom-popup>
</template>

<script>
import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
export default {
	data() {
		return {
			startTime: '',
			Islogin: this.Microi.IsLogin(),
			winInfo: {},
			width: 375,
			height: 64, //header高度
			top: 26, //标题图标距离顶部距离
			currentTab: 0,
			tabWidth: 300,
			KeyWord: '',
			Islogin: this.Microi.IsLogin(),
			CurrentUser: this.Microi.GetCurrentUser(),
			DataCount: {},
			userApply: {
				Data: [],
				page: 1,
				noData: false
			},
			renmaiCurrentTab: 0,

			renmaiTab: [
				{
					name: '人脉',
					Data: [],
					page: 1,
					noData: false,
					textHolder: '搜索我的好友'
				},
				{
					name: '我推荐的',
					Data: [],
					page: 1,
					noData: false,
					textHolder: '搜索我的好友'
				}
			],
			tabs: [
				{
					name: '推荐我',
					Data: [],
					page: 1,
					noData: false,
					textHolder: '搜索推荐我的人',
					CountName: 'TuiJianmyCount'
				},
				{
					name: '粉丝',
					Data: [],
					page: 1,
					noData: false,
					textHolder: '搜索我的粉丝',
					CountName: 'fansCount'
				},
				{
					name: '关注',
					Data: [],
					page: 1,
					noData: false,
					textHolder: '搜索我关注的人',
					CountName: 'myGuanzhuCount'
				},
				{
					name: '人脉',
					textHolder: '搜索我的好友',
					CountName: 'RenmaiCount'
				}
			],
			groupedRenmaiList: {},
			groupedRenmaiList1: {},
			AddFriend: false,
			ShenqingLY: '',
			newFriendApplyId: '',
			zhuanfaShow: false,
			shareUserInfo: {
				userList: [],
				pinglunNR: ''
			},
			friendsList: {
				page: 1,
				Data: [],
				noData: false
			},
			currentInfo: {}
		};
	},
	mounted() {
		let obj = {};
		// #ifdef MP-WEIXIN
		obj = wx.getMenuButtonBoundingClientRect();
		// #endif
		// #ifdef MP-BAIDU
		obj = swan.getMenuButtonBoundingClientRect();
		// #endif
		// #ifdef MP-ALIPAY
		my.hideAddToDesktopMenu();
		// #endif

		setTimeout(() => {
			uni.getSystemInfo({
				success: (res) => {
					console.log(res, 'winInfo');
					this.winInfo = res;
					this.width = obj.left || res.windowWidth;
					this.tabWidth = this.width * 0.8;
					this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44;
					this.top = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6;
					console.log(this.height, 'heght', this.top);
				}
			});
		}, 0);
	},
	onShow() {
		this.startTime = new Date();
	},
	onHide() {
		if (this.Islogin) {
			// 获取当前页面栈
			const pages = getCurrentPages();
			// 获取当前页面的对象
			const currentPage = pages[pages.length - 1];
			// 获取当前页面的路径
			const route = currentPage.route;
			// 获取当前页面的参数
			const options = currentPage.options;
			this.Microi.ApiEngine.Run('Add_liulanLog', {
				YemianCS: options,
				YemianDZ: route,
				LiulanSJC: new Date().getTime() - this.startTime.getTime()
			});
		}
	},
	onUnload() {
		if (this.Islogin) {
			// 获取当前页面栈
			const pages = getCurrentPages();
			// 获取当前页面的对象
			const currentPage = pages[pages.length - 1];
			// 获取当前页面的路径
			const route = currentPage.route;
			// 获取当前页面的参数
			const options = currentPage.options;
			this.Microi.ApiEngine.Run('Add_liulanLog', {
				YemianCS: options,
				YemianDZ: route,
				LiulanSJC: new Date().getTime() - this.startTime.getTime()
			});
		}
	},
	onLoad(options) {
		var info = {
			index: this.currentTab
		};
		if (options.Tab) {
			info = {
				index: options.Tab
			};
		}
		this.change(info);
		console.log(this.currentTab);
	},
	methods: {
		async getInfoList() {
			var self = this;
			var res = await self.Microi.ApiEngine.Run('get_userFriendCount', {
				YonghuID: self.CurrentUser?.Id,
				KeyWord: self.KeyWord || ''
			});
			this.renmaiTab[0].name = `人脉（${res.Data.RenmaiCount}人）`;
			self.DataCount = res.Data;
		},
		async sendMessage(userID, Account) {
			var UserSig = await this.Microi.ApiEngine.Run('get_Im_UserId', {
				Account: this.CurrentUser.Account
			});
			UserSig = UserSig.Data;
			const conversationID = `C2C${Account}`;
			uni.setStorageSync('receiverInfo', { userID: Account });
			TUIConversationService.switchConversation(conversationID);
			uni.navigateTo({
				url: '/pages/message/chatUser?YonghuID=' + userID + '&conversationID=' + conversationID + '&Account=' + Account
			});
			// uni.navigateTo({
			// 	url: `/TUIKit/components/TUIChat/index?conversationID=${conversationID}&UserSig=${UserSig}&YonghuID=${userID}&MyAccount=${this.CurrentUser.Account}`
			// });
		},
		// 分享
		shareWechat() {
			var self = this;
			var path = '/pages/my/myDetail/myDetail';
			// 获取当前页面的路径
			var route = path + '?Id=' + this.currentInfo.YonghuID;
			if (this.Islogin) {
				route = route + '&ShangjiID=' + this.CurrentUser.Id;
			}
			var imageUrl = '';
			if (this.currentInfo.Avatar) {
				imageUrl = this.currentInfo.Avatar;
			}
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 5,
				title: this.currentInfo.Name + '名片分享',
				imageUrl: imageUrl || 'https://minio.nbweixin.cn/public/baiying/img/20250506/byingLOGO_3x.png',
				miniProgram: {
					id: 'gh_b4436e0c5cb3',
					path: route,
					type: 2,
					webUrl: this.Microi.Weburl
				},
				success: function (res) {
					console.log('success:' + JSON.stringify(res));
				},
				fail: function (err) {
					console.log('fail:' + JSON.stringify(err));
				}
			});
		},
		shareUser(item, j) {
			if (item.Selected) {
				var index = this.shareUserInfo.userList.findIndex((val) => (val.YonghuID = item.YonghuID));
				if (index != -1) {
					this.shareUserInfo.userList.splice(index, 1);
				}
			} else {
				this.shareUserInfo.userList.unshift(item);
			}
			this.friendsList.Data[j].Selected = !this.friendsList.Data[j].Selected;
		},
		caozuoShow(item) {
			console.log(item, 'item');
			this.currentInfo = item;
			if (this.Islogin) {
				if (!this.friendsList.noData && !this.friendsList.Data.length) this.getFriendList();
				this.zhuanfaShow = true;
			} else {
				this.Microi.Tips('请先登录', false);
			}
		},
		async getFriendList() {
			var self = this;
			if (this.friendsList.noData) {
				this.Microi.Tips('暂无更多好友', false);
				return;
			}
			var res = await self.Microi.ApiEngine.Run('get_myFriendList', {
				YonghuID: self.CurrentUser.Id,
				page: this.friendsList.page
			});
			if (!res.Data.length) {
				this.friendsList.noData = true;
				return;
			}
			if (this.friendsList.page == 1) {
				this.friendsList.Data = res.Data;
			} else {
				this.friendsList.Data.push(...res.Data);
			}
			this.friendsList.page++;
		},
		searchHuati(item) {
			var name = item.name ? item.name : item;
			uni.navigateTo({
				url: '/pages/my/search/searchList?info=' + name + '&currentTab=0'
			});
		},
		async shareMessage() {
			var self = this;
			if (!self.shareUserInfo.userList.length) {
				this.Microi.Tips('请选择分享好友', false);
				return;
			}
			var res = await self.Microi.ApiEngine.Run('get_ShareUser', {
				userList: self.shareUserInfo.userList,
				PinglunNR: self.shareUserInfo.pinglunNR || self.currentInfo.Name || self.currentInfo.Account,
				Biaoming: 'sys_user',
				Id: this.currentInfo.YonghuID
			});
			if (res.Code == 1) {
				this.Microi.Tips('分享成功', false);
				this.shareUserInfo = {
					userList: [],
					pinglunNR: ''
				};
				this.zhuanfaShow = false;
				return;
			} else {
				this.Microi.Tips(res.Msg, false);
			}
		},
		moreBtnShow(index, Type, index1) {
			var currentTab = this.currentTab;
			var renmaiTab = this.renmaiCurrentTab;
			if (Type && currentTab == 1) {
				this.userApply.Data[index].moreBtn = !this.userApply.Data[index].moreBtn;
			} else if (currentTab == 1 || currentTab == 0 || currentTab == 2) {
				this.tabs[currentTab].Data[index].moreBtn = !this.tabs[currentTab].Data[index].moreBtn;
			} else {
				this.renmaiTab[this.renmaiCurrentTab].Data[index1].users[index].moreBtn = !this.renmaiTab[this.renmaiCurrentTab].Data[index1].users[index].moreBtn;
			}
		},
		addFriendApply(YonghuID) {
			this.newFriendApplyId = YonghuID;
			this.ShenqingLY = '';
			this.AddFriend = true;
		},
		async sendYaoqing() {
			var self = this;
			if (!self.ShenqingLY) {
				this.Microi.Tips('请输入申请语', false);
				return;
			}
			uni.showLoading({
				title: '提交中～',
				mask: true
			});
			var res = await self.Microi.ApiEngine.Run('add_friends', {
				ShenqingLY: self.ShenqingLY,
				ShenqingRID: self.CurrentUser.Id,
				BeishenQRID: self.newFriendApplyId
			});
			uni.hideLoading();
			if (res.Code == 1) {
				self.Microi.Tips(res.Msg, true);
				self.AddFriend = false;
				self.ShenqingLY = '';
				self.newFriendApplyId = '';
			} else {
				self.Microi.Tips(res.Msg, false);
			}
		},
		lookApply(Id) {
			uni.navigateTo({
				url: '/pages/my/userList/userApply?Id=' + Id
			});
		},
		async GuanzhuUser(index, Id, Type, index1) {
			var self = this;
			var info = {};
			if (Type && self.currentTab == 1) {
				info = this.userApply.Data[index];
				var checkType = 0;
			} else if (self.currentTab == 1 || self.currentTab == 0 || self.currentTab == 2) {
				info = this.tabs[self.currentTab].Data[index];
				var checkType = info.Iguanzhu;
			} else {
				info = this.renmaiTab[this.renmaiCurrentTab].Data[index1].users[index];
				var checkType = info.Iguanzhu;
			}
			var res = await self.Microi.ApiEngine.Run('GuanZhu_user', {
				YonghuID: Id,
				Type: checkType
			});
			if (res.Code != 1) {
				this.Microi.Tips(res.Msg, false);
			} else {
				// this.Microi.Tips(res.Msg, true);
				info.Iguanzhu = !checkType;
				info.moreBtn = false;
			}
			// if (self.currentTab == 0 || self.currentTab == 1 || self.currentTab == 2) {
			// 	this.tabs.forEach((item, index) => {
			// 		item.Data.forEach((val) => {
			// 			if (val.YonghuID == Id) {
			// 				val.Iguanzhu = !checkType;
			// 			}
			// 		});
			// 	});
			// }
		},
		async TuijianUser(index, Id, index1) {
			var self = this;
			var info = {};
			if (self.currentTab == 1 || self.currentTab == 0 || self.currentTab == 2) {
				info = this.tabs[self.currentTab].Data[index];
				var checkType = info.Ituijian;
			} else {
				info = this.renmaiTab[this.renmaiCurrentTab].Data[index1].users[index];
				var checkType = info.Ituijian;
			}
			var res = await self.Microi.ApiEngine.Run('TuiJian_user', {
				YonghuID: Id,
				Type: checkType
			});
			if (res.Code != 1) {
				this.Microi.Tips(res.Msg, false);
			} else {
				// this.Microi.Tips(res.Msg, true);
				info.Ituijian = !checkType;
				info.moreBtn = false;
			}
			// if (self.currentTab == 0 || self.currentTab == 1 || self.currentTab == 2) {
			// 	this.tabs.forEach((item) => {
			// 		item.Data.forEach((val) => {
			// 			if (val.YonghuID == Id) {
			// 				val.Ituijian = !checkType;
			// 			}
			// 		});
			// 	});
			// }
		},
		deleteFriend(index, Id) {
			var self = this;
			var info = {};
			if (self.currentTab == 1 || self.currentTab == 0 || self.currentTab == 2) {
				info = this.tabs[self.currentTab].Data[index];
				var checkType = info.friend;
			} else {
				info = this.renmaiTab[this.renmaiCurrentTab].Data[index1].users[index];
				var checkType = info.friend;
			}
			uni.showModal({
				title: '提示',
				content: '确定删除该好友吗？',
				success: async function (res) {
					if (res.confirm) {
						var result = await self.Microi.ApiEngine.Run('delete_friend', {
							YonghuID: Id
						});
						if (result.Data) {
							self.Microi.Tips('删除好友成功', true);
							info.friend = !checkType;
							return;
						} else {
							self.Microi.Tips('删除好友失败', true);
							return;
						}
					} else if (res.cancel) {
					}
				}
			});
		},
		getMoreData() {
			var currentTab = this.currentTab;
			if (currentTab == 0) {
				this.getTuiJianMy();
			} else if (currentTab == 2 || currentTab == 1) {
				this.getMyGuanzhu();
			} else if (currentTab == 3 && this.renmaiCurrentTab == 0) {
				this.getRenMaiList();
			} else if (currentTab == 3 && this.renmaiCurrentTab == 1) {
				this.getMyTuiJian();
			}
		},
		async getFriendApply() {
			var self = this;
			var info = self.userApply;
			if (info.noData) return;
			uni.showLoading({
				title: '加载中～',
				mask: false
			});
			var res = await self.Microi.ApiEngine.Run('get_myFriendApplyList', {
				YonghuID: self.CurrentUser.Id,
				page: info.page || 1,
				searchKey: self.KeyWord || ''
			});
			if (!res.Data.length) info.noData = true;
			info.Data.push(...res.Data);
		},
		async getTuiJianMy() {
			var self = this;
			var info = self.tabs[0];
			if (info.noData) return;
			uni.showLoading({
				title: '加载中～',
				mask: false
			});
			var res = await self.Microi.ApiEngine.Run('get_TuiJianList', {
				YonghuID: self.CurrentUser?.Id,
				page: info.page,
				Type: info.name,
				KeyWord: self.KeyWord
			});
			uni.hideLoading();
			if (!res.Data.length) {
				info.noData = true;
				return;
			}
			info.Data.push(...res.Data);
			info.page++;
		},

		async getMyTuiJian() {
			var self = this;
			var info = self.renmaiTab[1];
			if (info.noData) return;

			uni.showLoading({
				title: '加载中～',
				mask: false
			});

			var res = await self.Microi.ApiEngine.Run('get_TuiJianList', {
				YonghuID: self.CurrentUser?.Id,
				page: info.page,
				Type: '我推荐的',
				KeyWord: self.KeyWord
			});

			uni.hideLoading();

			if (!res.Data.length) {
				info.noData = true;
				return;
			}

			// 分组逻辑
			let newGroupedData = {};
			res.Data.forEach((user) => {
				let letter = user.FirstString;
				if (!newGroupedData[letter]) {
					newGroupedData[letter] = [];
				}
				newGroupedData[letter].push(user);
			});

			// 排序每个新的分组的数据
			for (let letter in newGroupedData) {
				newGroupedData[letter].sort((a, b) => a.Name.localeCompare(b.Name));
			}

			// 合并新的分组数据到现有的分组数据中
			for (let letter in newGroupedData) {
				if (!self.groupedRenmaiList1[letter]) {
					self.groupedRenmaiList1[letter] = [];
				}
				self.groupedRenmaiList1[letter] = self.groupedRenmaiList1[letter].concat(newGroupedData[letter]);
			}

			// 排序每个合并后的分组的数据
			for (let letter in self.groupedRenmaiList1) {
				self.groupedRenmaiList1[letter].sort((a, b) => a.Name.localeCompare(b.Name));
			}

			// 对 letter 进行排序
			let sortedKeys = Object.keys(self.groupedRenmaiList1).sort();

			// 将分组后的数据转换为数组形式
			self.renmaiTab[1].Data = sortedKeys.map((key) => ({
				letter: key,
				users: self.groupedRenmaiList1[key]
			}));

			// 更新当前页码
			info.page++;
		},
		async getRenMaiList() {
			var self = this;
			var info = self.renmaiTab[0];
			if (info.noData) return;

			uni.showLoading({
				title: '加载中～',
				mask: false
			});

			var res = await self.Microi.ApiEngine.Run('my_RenmaiList', {
				YonghuID: self.CurrentUser.Id,
				page: info.page,
				Type: info.name,
				KeyWord: self.KeyWord
			});

			uni.hideLoading();

			if (!res.Data.length) {
				info.noData = true;
				return;
			}

			// 分组逻辑
			let newGroupedData = {};
			res.Data.forEach((user) => {
				let letter = user.FirstString;
				if (!newGroupedData[letter]) {
					newGroupedData[letter] = [];
				}
				newGroupedData[letter].push(user);
			});

			// 排序每个新的分组的数据
			for (let letter in newGroupedData) {
				newGroupedData[letter].sort((a, b) => a.Name.localeCompare(b.Name));
			}

			// 合并新的分组数据到现有的分组数据中
			for (let letter in newGroupedData) {
				if (!self.groupedRenmaiList[letter]) {
					self.groupedRenmaiList[letter] = [];
				}
				self.groupedRenmaiList[letter] = self.groupedRenmaiList[letter].concat(newGroupedData[letter]);
			}

			// 排序每个合并后的分组的数据
			for (let letter in self.groupedRenmaiList) {
				self.groupedRenmaiList[letter].sort((a, b) => a.Name.localeCompare(b.Name));
			}

			// 对 letter 进行排序
			let sortedKeys = Object.keys(self.groupedRenmaiList).sort();

			// 将分组后的数据转换为数组形式
			self.renmaiTab[0].Data = sortedKeys.map((key) => ({
				letter: key,
				users: self.groupedRenmaiList[key]
			}));

			// 更新当前页码
			info.page++;
		},
		async getMyGuanzhu() {
			var self = this;
			var info = self.tabs[self.currentTab];
			if (info.noData) return;
			uni.showLoading({
				title: '加载中～',
				mask: false
			});
			var res = await self.Microi.ApiEngine.Run('get_GuanzhuList', {
				YonghuID: self.CurrentUser?.Id,
				page: info.page,
				KeyWord: self.KeyWord || '',
				Type: info.name
			});
			uni.hideLoading();
			if (!res.Data.length) {
				info.noData = true;
				return;
			}
			info.Data.push(...res.Data);
			info.page++;
		},
		search() {
			this.tabs[this.currentTab].Data = [];
			this.tabs[this.currentTab].page = 1;
			this.tabs[this.currentTab].noData = false;
			if (this.currentTab == 3) {
				this.renmaiTab[this.renmaiCurrentTab].page = 1;
				this.renmaiTab[this.renmaiCurrentTab].noData = false;
				this.renmaiTab[this.renmaiCurrentTab].Data = [];
				if (this.renmaiCurrentTab == 0) {
					this.groupedRenmaiList = {};
				} else {
					this.groupedRenmaiList1 = {};
				}
			}
			this.getMoreData();
			this.getInfoList();
		},
		ChangeRenmaiTab(e) {
			this.renmaiCurrentTab = e.index;
			if (e.index == 0) {
				this.getRenMaiList();
			} else {
				this.getMyTuiJian();
			}
		},
		change(e) {
			this.clearData();
			this.KeyWord = '';

			this.currentTab = e.index;
			this.KeyWord = '';
			if (e.index == 0 && !this.tabs[0].Data.length && !this.tabs[0].noData) {
				this.getTuiJianMy();
			} else if (e.index == 1 && !this.tabs[1].Data.length && !this.tabs[1].noData) {
				this.getMyGuanzhu();
				if (!this.userApply.Data.length) {
					this.getFriendApply();
				}
			} else if (e.index == 2 && !this.tabs[2].Data.length && !this.tabs[2].noData) {
				this.getMyGuanzhu();
			} else if (e.index == 3) this.ChangeRenmaiTab({ index: this.renmaiCurrentTab });
			this.getInfoList();
		},
		userDetail(Id) {
			uni.navigateTo({
				url: '/pages/my/myDetail/myDetail?Id=' + Id
			});
		},
		async getRenmaiType(Id1, Id2) {
			var self = this;
			var res = await self.Microi.ApiEngine.Run('get_RenmaiLevel', {
				YonghuID1: Id1,
				YonghuID1: Id2
			});
			if (res.Data) {
				return `${res.Data}度人脉`;
			} else {
				return null;
			}
		},
		clearData() {
			this.renmaiTab = [
				{
					name: '人脉',
					Data: [],
					page: 1,
					noData: false,
					textHolder: '搜索我的好友'
				},
				{
					name: '我推荐的',
					Data: [],
					page: 1,
					noData: false,
					textHolder: '搜索我的好友'
				}
			];
			this.groupedRenmaiList = {};
			this.groupedRenmaiList1 = {};
			this.userApply = {
				Data: [],
				page: 1,
				noData: false
			};
			this.tabs = [
				{
					name: '推荐我',
					Data: [],
					page: 1,
					noData: false,
					textHolder: '搜索推荐我的人',
					CountName: 'TuiJianmyCount'
				},
				{
					name: '粉丝',
					Data: [],
					page: 1,
					noData: false,
					textHolder: '搜索我的粉丝',
					CountName: 'fansCount'
				},
				{
					name: '关注',
					Data: [],
					page: 1,
					noData: false,
					textHolder: '搜索我关注的人',
					CountName: 'myGuanzhuCount'
				},
				{
					name: '人脉',
					textHolder: '搜索我的好友',
					CountName: 'RenmaiCount'
				}
			];
		},
		goBack() {
			let pages = getCurrentPages(); // 获取当前页面堆栈
			let pageCount = pages.length; // 页面堆栈中的页面数量
			// 判断是否有上级页面
			if (pageCount > 1) {
				// 如果有上级页面，则返回上级页面
				uni.navigateBack({
					delta: 1
				});
			} else {
				// 如果没有上级页面，则返回首页
				uni.switchTab({
					url: '/pages/tabbar/find/find' // 替换为你的首页路径
				});
			}
		}
	},
	onPullDownRefresh() {
		var info = {
			index: this.currentTab
		};
		this.change(info);
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 500);
	},
	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage: function (options) {
		var self = this;
		if (this.currentInfo && this.currentInfo.YonghuID) {
			var path = '/pages/my/myDetail/myDetail';
			// 获取当前页面的路径
			var route = path + '?Id=' + this.currentInfo.YonghuID;
			if (this.Islogin) {
				route = route + '&ShangjiID=' + this.CurrentUser.Id;
			}
			var imageUrl = '';
			if (this.currentInfo.Avatar) {
				imageUrl = this.currentInfo.Avatar;
			}
			var Row = {
				title: this.currentInfo.Name || this.currentInfo.Account,
				path: route,
				imageUrl: imageUrl,
				success: function (res) {
					// self.Microi.ApiEngine.Run('zhuanfa_Wenzhang', {
					// 	Biaoming: 'diy_Biji',
					// 	Id: self.options.Id
					// });
				}
			};
			return Row;
		} else {
			return null;
		}
	}
};
</script>

<style scoped>
page {
	background-color: #fff;
}
.page {
	background: #fff;
	padding: 0 0 150rpx 0;
}
.header-container {
	position: fixed;
	top: 0%;
	z-index: 10;
	left: 0;
}
.tui-header-box {
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999;
	background-color: #fff;
	box-sizing: border-box;
}

.tui-header {
	width: 100%;
	font-weight: 500;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;

	color: var(----, #fff);
	text-align: center;

	/* 标题/标题 */
}

.tui-header-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	transform: translateZ(0);
	z-index: 9999;
}

.tui-icon-box {
	position: absolute;
	left: 32rpx;
	/* position: relative;
	height: 20px !important;
	width: 20px !important;
	padding: 6px !important;

	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center; */
}
.tui-icon-box image {
	width: calc(16rpx * 1.9);
	height: calc(16rpx * 1.9);
	flex-shrink: 0;
}

.search-container {
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 20rpx;
	padding-bottom: 0;
	box-sizing: border-box;
	height: 100rpx;
}
.search-box {
	width: 590rpx;
	height: 76rpx;
	background: #f4f5f6;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	padding: 20rpx;
	display: flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: flex-start;
}
.search-box image {
	width: 32rpx;
	height: 32rpx;
	margin-right: 20rpx;
}
.search-btn {
	width: 64rpx;
	height: 44rpx;

	font-weight: 500;
	font-size: 32rpx;
	color: #666666;
	line-height: 38rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
	margin-left: 20rpx;
}
.confirm-btn {
	width: 144rpx;
	height: 48rpx;
	background: #FB353B;
	border-radius: 32rpx 32rpx 32rpx 32rpx;

	font-family: PingFang SC, PingFang SC;
	font-weight: 800;
	font-size: 26rpx;
	color: #ffffff;
	line-height: 48rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.sendMessage-btn {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12rpx;

	font-family: PingFang SC, PingFang SC;
	font-size: 28rpx;
	color: #999999;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.sendMessage-btn image {
	width: 40rpx;
	height: 40rpx;
}
.input-placeholder {
	line-height: 40rpx;
	font-family: PingFang SC, PingFang SC;
	font-size: 28rpx;
	color: #999999;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.user-container {
	/* padding-top: 280rpx; */
	box-sizing: border-box;
}
.title-info {
	font-family: PingFang SC, PingFang SC;
	font-weight: 800;
	font-size: 30rpx;
	color: #666666;
	text-align: left;
	font-style: normal;
	text-transform: none;
	margin-left: 20rpx;
}
.scroll-container {
}
.renmai-box {
	margin-top: 20rpx;
}
.title-tle {
	padding: 0 32rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 800;
	font-size: 30rpx;
	color: #666666;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.user-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 32rpx;
	box-sizing: border-box;

	width: 750rpx;
	height: 176rpx;
	background: #ffffff;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	border-bottom: 2rpx solid #f2f2f2;
}
.left-box {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 16rpx;
}
.right-box {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 16rpx;
}
.user-avatar {
	width: 108rpx;
	height: 108rpx;
	border-radius: 50%;
}
.user-info {
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	gap: 12rpx;
}
.line-box {
	display: flex;
	justify-content: flex-start;
	gap: 20rpx;
}
.user-name {
	font-family: Roboto, Roboto;
	font-weight: 400;
	font-size: 30rpx;
	color: #000000;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.tuijian-each {
	width: 130rpx;
	height: 48rpx;
	background: #afb9cb;
	border-radius: 32rpx 32rpx 32rpx 32rpx;

	font-family: PingFang SC, PingFang SC;
	font-weight: 800;
	font-size: 24rpx;
	color: #ffffff;
	text-align: center;
	line-height: 48rpx;
	font-style: normal;
	text-transform: none;
}
.friend-each {
	width: 80rpx;
	height: 48rpx;
	background: #FB353B;
	border-radius: 32rpx 32rpx 32rpx 32rpx;

	font-family: PingFang SC, PingFang SC;
	font-weight: 800;
	font-size: 24rpx;
	color: #ffffff;
	line-height: 48rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.line-title {
	font-family: Roboto, Roboto;
	font-weight: 400;
	font-size: 28rpx;
	color: #666666;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.no-Data {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	font-size: 25rpx;
	color: #999999;
	margin: auto;
	margin-top: 200rpx;
}
.no-Data image {
	width: 400rpx;
}
.more-btnContainer {
	position: relative;
}
.menu-item {
	width: 188rpx;
	height: 80rpx;
	background: rgba(255, 255, 255, 0);
	border-radius: 0rpx 0rpx 0rpx 0rpx;

	font-family: PingFang SC, PingFang SC;
	font-size: 28rpx;
	color: #999999;
	text-align: left;
	font-style: normal;
	text-transform: none;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8rpx;
}
.menu-item image {
	height: 32rpx;
	width: 32rpx;
}

.MingPian-tips-model {
	height: 230rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background: #ffffff;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	border: 2rpx solid #f4f5f6;
	padding: 36rpx 0 42rpx 0;
	font-family: PingFang SC, PingFang SC;
	/* font-weight: 800; */
	font-size: 32rpx;
	color: #333333;
	text-align: center;
	font-style: normal;
	text-transform: none;
	gap: 36rpx;
}
.modal-BT {
	font-weight: 800;
}
.MingPian-tips-model textarea {
	width: 90%;
	height: 200rpx;
	padding: 16rpx;
	background: #f5f5f5;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	border: 1rpx solid #f4f5f6;
	box-sizing: border-box;
	text-align: left;
}
.model-input {
	font-family: PingFang SC, PingFang SC;
	font-size: 32rpx;
	color: #999999;
}
.wanS-btn {
	width: 276rpx;
	height: 72rpx;
	background: #FB353B;
	border-radius: 98rpx 98rpx 98rpx 98rpx;

	font-family: PingFang SC, PingFang SC;
	font-weight: 800;
	font-size: 32rpx;
	line-height: 72rpx;
	color: #ffffff;
	text-align: center;
	font-style: normal;
	text-transform: none;
}

.popup-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16rpx;
	border-bottom: 1rpx solid #ececec;
}

.popup-title {
	font-size: 32rpx;
	font-weight: bold;
}

.popup-close {
	font-size: 40rpx;
	color: #a6a6a6;
	padding: 10rpx;
}
.popup-line {
	padding: 16rpx;
	border-bottom: 1rpx solid #ececec;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 20rpx;
}
.input-placeholder {
	font-family: PingFang SC, PingFang SC;
	font-size: 22rpx;
	color: #ccc;
	text-align: left;
}
.friend-box {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 10rpx;
	position: relative;
	font-family: PingFang SC, PingFang SC;
	font-size: 22rpx;
	color: #000;
	text-align: left;
	font-style: normal;
	margin-right: 10rpx;
}

.friend-avatar {
	width: 80rpx;
	height: 80rpx;

	position: relative;
}
.friend-avatar image {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}
.select-box {
	position: absolute;
	bottom: -2%;
	right: -2%;
	width: 30rpx;
	height: 30rpx;
	background-color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.share-box {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 10rpx;

	font-family: PingFang SC, PingFang SC;
	font-size: 22rpx;
	color: #a6a6a6;
	text-align: left;
	font-style: normal;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
}
.share-img {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
}
.share-NR {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.share-NR textarea {
	height: 100rpx;
	font-size: 22rpx;
	line-height: 40rpx;
}
.comment-textarea {
	width: 100%;
	height: 100rpx;
	padding: 20rpx;
	box-sizing: border-box;
	margin: 20rpx 0;
	background: #f8f8f8;
	border-radius: 10rpx;

	font-family: PingFang SC, PingFang SC;
	font-size: 28rpx;
	color: #000;
	text-align: left;
	font-style: normal;
	text-transform: none;
}

.popup-footer {
	padding-top: 20rpx;
}
.fasong-btn {
	width: 90%;
	margin: auto;
	height: 60rpx;
	line-height: 60rpx;
	background-color: #FB353B;
	color: #fff;
	text-align: center;
	border-radius: 60rpx;
}
</style>
